<template>
  <div id="app">
    <transition :name="routerAni">
      <router-view id="routerContent" class="router-view"></router-view>
    </transition>
    <loading v-if="isLoading"></loading>
  </div>
</template>
<script>
import loading from '@/components/loading'
import config from '@/js/config'
import { getQueryString } from '@/js/common'
import { wxConfig } from './js/wxenv'
import { popup, openToast } from './js/tools'
import { mapState } from 'vuex'
export default {
  name: 'app',
  components: {
    loading
  },
  data () {
    return {
      reloadUrl: ''
    }
  },
  computed: {
    ...mapState(['isLoading', 'routerAni', 'userNum'])
  },
  mounted () {
    let code = this.$route.query.code || getQueryString('code')
    let { agentid, appid } = config.wx
    let redirectUri = encodeURIComponent(config.wx.redirectUri)
    this.reloadUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + redirectUri + '&response_type=code&scope=snsapi_userinfo&agentid=' + agentid + '&state=state#wechat_redirect'
    if (code) {
      if (!this.userNum) {
        this.getUserInfo(code)
      }
    } else {
      // console.log('链接后面没有code，重新授权')
      if (!this.userNum) {
        location.href = this.reloadUrl
      } else {
        console.log('userNum 已经存在')
      }
    }
  },
  methods: {
    getUserInfo (code) {
      console.log('获取用户信息')
      this.$http({
        method: 'get',
        url: config.baseUrl + `/vank/receipt/user_info1.do`,
        data: {
          code: code
        }
      }).then(res => {
        console.log('用户信息>>>', res)
        let data = JSON.parse(res.data)
        if (+data.errcode !== 0) {
          if (+data.errcode === 40029) {
            window.location.href = this.reloadUrl
          } else {
            openToast({
              msg: data.errmsg,
              duration: 2000
            })
          }
        } else {
          if (data.userid) {
            this.$store.commit('userNum', data.userid)
          } else {
            popup({
              tpl: 'alert',
              title: '提示',
              content: `<img style="width:100%;display:block" src="http://oo0tnny2b.bkt.clouddn.com/vanke_erweima.png" />
                        <div style="color:#333;font-size:.3rem;margin-top:.3rem">请长按二维码关注共享微信企业号</div>
                        `,
              buttons: [],
              buttonCallBack: function (index) {
                wx.closeWindow()
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import './css/color';
.list-item{
  color: $themeColor;
  font-size: .3rem;
  height: 0.8rem;
  border-bottom: 1px solid $themeColor;
  text-decoration: none;
}
.router-view{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  min-height:100%;
  background-color:$bgColor;
  transition: opacity .5s, transform .3s cubic-bezier(0.25,0.1,0.25,1);
}
.slide-left-enter{
  opacity:.5;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity:0;
  transform: translate3d(-33%, 0, 0);
}
.slide-right-enter {
  opacity:.5;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity:0;
  transform: translate3d(33%, 0, 0);
}
// .slide-left-enter, .slide-right-leave-active {
//   // opacity: 0;
//   transform: translate3d(100%, 0, 0);
// }
// .slide-left-leave-active, .slide-right-enter {
//   // opacity: 0;
//   transform: translate3d(-100%, 0, 0);
// }
</style>
